@charset "utf-8";
.clearfix:after {
  display: block;
  content: '';
  clear: both;
}

.index-benner {
  //  width: 1900px;
  //  height: 560px;
  img {
    width: 100%;
    height: 100%;
  }
}

.index-content {
  width: 1200px;
  margin: 0 auto;
  //  height: 100px;
  //  border: 1px solid red;
  //  我们的产品
  .list {
    margin: 60px 85px 0px 85px;
    height: 50px;
    .div1 {
      width: 420px;
      height: 1px;
      background: #cccccc;
      float: left;
      margin: 12px 15px;
    }
    .div2 {
      text-align: center;
      float: left;
      font-size: 24px;
      font-weight: 800;
      p {
        font-size: 8px;
        color: #cccccc;
        font-weight: 400;
      }
    }
  }
  //  我们的产品下面的列表
  .index-container {
    margin-top: 50px;
    .li-1 {
      margin-left: 53px;
    }
    li {
      height: 500px;
      width: 260px;
      float: left;
      .list_one {
        width: 260px;
        height: 260px;
        background: #f6f6f6;
        position: relative;
        overflow: hidden;
        &:hover {
          .list_2 {
            transition: all 1s;
            width: 260px;
          }
        }
        .list_1 {
          text-align: center;
          img {
            display: inline-block;
            margin: 55px 0px 40px 0px;
          }
          p {
            font-size: 18px;
          }
        }
        .list_2 {
          position: absolute;
          width: 0px;
          height: 260px;
          top: 0px;
          right: 0px;
        }
      }
    }
    .zhong {
      div {
        font-size: 18px;
        margin: 10px 0px;
        font-weight: 700;
      }
      p {
        font-size: 12px;
        line-height: 20px;
        color: #666666;
      }
    }
  }

}

//上移动的列表
.index-main {
  width: 100%;
  height: 740px;
  background: #fafafa;
}

.index-tab {
  width: 1200px;
  margin: 0 auto;
  //  background: deepskyblue;
  .list_one {
    padding-top: 65px;
    text-align: center;
    font-size: 30px;
    font-weight: 900;
    span {
      color: #0b95ed;
    }
  }
  ul {
    margin-top: 130px;
    .li-2 {
      margin-left: 12px;
    }
    li {
      float: left;
      text-align: center;
      width: 228px;
      height: 428px;
      border: 1px solid #e7e8e9;
      background: #ffffff;
      position: relative;
      &:hover {
        .list_san {
          height: 210px;
          transition: all 1s;
        }
        .list_two {
          margin: -65px 0px 100px 0px;
          transition: all 1s;
        }
        box-shadow: 0px 5px 40px #939393;
        margin-top: -5px;
        transition: all 1s;
      }
      .list_two {
        margin: 45px 0px 100px 0px;
      }
      .list_san {
        width: 178px;
        height: 100px;
        margin: 0px 25px;
        overflow: hidden;
        position: absolute;
        bottom: 0;
        div {
          margin: 15px 0px;
          font-size: 18px;
          font-weight: 600;
        }
        p {
          font-size: 12px;
          line-height: 22px;
          color: #a3a3a3;
        }
      }
    }
  }
}

//最下面的图片
.index-msg {
  width: 100%;
  height: 600px;
  .msg_1 {
    width: 1200px;
    height: 600px;
    margin: 0 auto;
    .msg_1_one {
      float: left;
      margin: 100px 0px 120px 0px;
    }
    .msg_1_two {
      float: left;
      margin-left: 50px;
      margin-top: 186px;
      h4 {
        font-size: 18px;
        margin-bottom: 35px;
      }
      p {
        font-size: 30px;
        color: #2281ef;
      }
      .msg_1_san {
        width: 260px;
        height: 65px;
        margin-top: 40px;
        border: 1px solid;
        color: white;
        font-size: 20px;
        background: cornflowerblue;
        div {
          padding: 15px 50px;
        }
        span {
          display: inline-block;
          text-align: center;
          width: 20px;
          height: 20px;
          border: 1px solid;
          border-radius: 50%;
          line-height: 20px;
        }
      }
    }
  }
}
